<template>
  <div class="login">
    <div class="index">
      <div class="picture hidden-sm-and-down">
        <div class="title">校园二手交易平台</div>
        <img src="../assets/shopping.png" />
      </div>
      <div class="menu">
        <div class="title-small hidden-md-and-up">校园二手交易平台</div>
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ isRegisterBtnClick == false ? '登录' : '注册' }}</span>
              <el-button
                @click="registerBtn()"
                style="float: right; padding: 3px 0"
                type="text"
                >{{
                  isRegisterBtnClick == false ? '注册' : '返回登录'
                }}</el-button
              >
            </div>
          </template>
          <!-- 登录面板 -->
          <el-form
            :model="user"
            label-width="60px"
            v-if="isRegisterBtnClick == false"
          >
            <el-form-item label="用户名">
              <el-input
                v-model="user.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="user.password"
                placeholder="请输入密码"
                type="password"
                show-password
              ></el-input>
            </el-form-item>
            <!-- 验证码功能-->
            <div class="verifyCode">
              <el-form-item label="验证码">
                <el-input
                  v-model="user.verifyCode"
                  placeholder="请输入验证码"
                  @keyup.enter="login"
                >
                </el-input>
              </el-form-item>
              <div class="img-box">
                <img class="verifyCodeImg" :src="imgUrl" @click="resetImg" />
              </div>
            </div>
            <!-- 操作按钮 -->
            <div class="option">
              <el-button type="primary" style="width: 120px" @click="login()"
                >登录</el-button
              >
              <!-- 待开启功能：忘记密码 -->
              <!-- <router-link to="/lostPwd">忘记密码</router-link> -->
            </div>
          </el-form>
          <!-- 注册面板 -->
          <el-form
            :model="user"
            label-width="60px"
            v-if="isRegisterBtnClick == true"
          >
            <el-form-item label="用户名">
              <el-input
                v-model="newUser.username"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="newUser.password"
                placeholder="请输入密码"
                type="password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="确认">
              <el-input
                v-model="newUser.confirmPwd"
                placeholder="请再次输入密码"
                type="password"
                show-password
              ></el-input>
            </el-form-item>
            <!-- 手机验证码功能-->
            <el-form-item label="手机号">
              <el-input v-model="newUser.tel" placeholder="请输入手机号">
              </el-input>
            </el-form-item>
            <div class="sendCode">
              <el-form-item label="验证码">
                <el-input v-model="newUser.code" placeholder="请输入手机验证码">
                </el-input>
              </el-form-item>
              <el-button @click="sendMs()">发送验证码</el-button>
            </div>
            <div class="option">
              <el-button type="primary" style="width: 120px" @click="register()"
                >注册</el-button
              >
            </div>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'http://localhost:8080/verifyCode?time=' + new Date(), //imgUrl在数据区定义  new Date()生成随机事件用于更换验证码，防止浏览器缓存
      isRegisterBtnClick: false, //注册按钮是否被点击（是否切换到注册面板）
      user: {
        username: '米小罗',
        password: '123',
        verifyCode: '',
      },
      newUser: {
        username: '',
        password: '',
        confirmPwd: '',
        tel: '',
        code: '',
      },
    }
  },
  methods: {
    //登录功能
    login() {
      // this.$axios
        // .post('/login', this.user)
        // .then((res) => {
        //   if (res.data.code == 200) {
        //     //200代表登陆成功
        //     this.$store.commit('setToken', res.data.token)
        //     this.$store.commit('setUserId', res.data.data.uid)
        //     this.$store.commit('setSuperuser', res.data.data.superuser)
            this.$router.push('/home')
        //     this.$message({
        //       type: 'success',
        //       message: '欢迎来到校园二手交易平台',
        //     })
        //   } else {
        //     this.$message.error('密码错误或验证码错误')
        //     this.user.verifyCode = ''
        //     this.imgUrl = 'http://localhost:8080/verifyCode?time=' + new Date()
        //   }
        // })
        // .catch(() => {
        //   this.$message.error('服务器繁忙，请稍后再试')
        //   this.imgUrl = 'http://localhost:8080/verifyCode?time=' + new Date()
        // })
    },
    //resetImg方法用于点击更换验证码 图片
    resetImg() {
      this.imgUrl = 'http://localhost:8080/verifyCode?time=' + new Date()
    },
    //点击注册按钮事件（切换到注册）
    registerBtn() {
      this.isRegisterBtnClick = !this.isRegisterBtnClick
    },
    //注册功能
    register() {
      console.log(this.newUser)
      this.$axios.post('/register', this.newUser).then((res) => {
        if (res.data.code == 200) {
          //后端返回状态码200意为成功
          this.$message({
            message: '注册成功',
            type: 'success',
          })
          this.registerBtn() //调用方法转到登录面板
          //帮助用户填好登录信息
          this.user.username = this.newUser.username
          this.user.password = this.newUser.password
        } else {
          //注册失败
          this.$message.error('注册失败，用户名已存在')
        }
      })
    },
    sendMs() {
      this.$axios.get('/sendMs/' + this.newUser.tel).then((res) => {
        console.log(res)
      })
    },
  },
  // created() {
  //   console.log("登录页token值：", localStorage.getItem("token"));
  // },
}
</script>

<style scoped>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.index {
  width: 1000px;
  height: 500px;
  display: flex;
  justify-content: center;
}
.picture {
  width: calc(100% - 400px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title {
  text-align: center;
  font-size: 36px;
  user-select: none;
  letter-spacing: 2px;
}
.title-small {
  text-align: center;
  font-size: 30px;
  user-select: none;
  letter-spacing: 2px;
  margin: 10px 0;
}
.picture img {
  height: 80%;
}
.menu {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.el-card {
  width: 60px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 100%;
}
.option {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: small;
}
.verifyCode {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.verifyCode .el-input {
  width: 180px;
}
.sendCode {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sendCode .el-input {
  width: 180px;
}
</style>
